<template>
  <div class="wrap">
    <el-form label-width="68px">
      <el-form-item label="选择年月" prop="modelName">
        <el-date-picker v-model="value" :picker-options="pickerOptions" type="month" placeholder="选择月"></el-date-picker>
      </el-form-item>
    </el-form>

    <el-calendar v-model="value" style="width: 100%;">
      <template slot="dateCell" slot-scope="{date, data}">
        <div :class="{ selected: isSelected(date, data) }" @click="handleCellClick(date, data)">
          <div class="solar">{{ data.day.split('-')[2] }}</div>
          <div v-for="(item, index) in list">
            <div v-if="item.date == data.day">
              <div class="hfName" v-if="item.dhf">待回访：{{ item.dhf }}人</div>
              <div class="hfName" v-if="item.yhf">已回访：{{ item.yhf }}人</div>
            </div>
            <!-- <div v-if="item.date!=data.day">暂无回访</div> -->
          </div>


        </div>
      </template>
    </el-calendar>

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="姓名">
        <el-input v-model="queryParams.roleName" placeholder="请输入医院名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="起止日期">
        <el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        <!-- <el-input v-model="queryParams.roleKey" placeholder="请输入医生名称" clearable style="width: 240px"
            @keyup.enter.native="handleQuery" /> -->
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(1)">新增回访人</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(2)">新增回访记录</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
            v-hasPermi="['system:role:edit']">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
            v-hasPermi="['system:role:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
            v-hasPermi="['system:role:export']">导出</el-button>
        </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="roleList">
      <el-table-column label="序号" type="index" width="55" />
      <el-table-column label="姓名" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="编号" prop="orderId" :show-overflow-tooltip="true" />
      <el-table-column label="性别" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="年龄" prop="packageId" :show-overflow-tooltip="true" />
      <el-table-column label="手机号" prop="orderId" :show-overflow-tooltip="true" />

      <el-table-column label="来源" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="状态" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="备注" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="回访日期" prop="name" :show-overflow-tooltip="true" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <!-- @click="addTage(scope.row)" -->
          <el-button size="mini" type="text">详情</el-button>
          <!-- -->
          <el-button @click="handleVist(scope.row)" size="mini" type="text">回访</el-button>

        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <el-dialog :title="title" :visible.sync="openDataScope" width="80%" append-to-body>
      <template v-if="title == '新增回访人'">
        <personList ref="addVisitPerson"></personList>
      </template>
      <template v-if="title == '新增回访记录'">
        <el-form :model="form" label-width="80px">
          <el-form-item label="回访记录">
            <el-input v-model="form.roleName" @keyup.enter.native="handleQuery" />
            <!-- <el-input v-model="form.roleName"  /> -->
          </el-form-item>
        </el-form>
      </template>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDataScope">确 定</el-button>
        <el-button @click="cancelDataScope">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="回访历史" :visible.sync="handleVistPup" width="80%" append-to-body>
      <div style="height: 600px;overflow-x: scroll;">
        <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item v-for="(item, index) in lists" :title="'回访时间:' + item.date" :name="item.id">
          <div>回访人：{{ item.hfr }}</div>
          <div>诊断类型：{{ item.zdlx }}</div>
          <div>诊断内容：{{ item.zdnr }}</div>
          <!-- <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div> -->
        </el-collapse-item>

      </el-collapse>
      </div>

      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitDataScope">确 定</el-button> -->
        <el-button @click="cancelDataScope">返回</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import personList from './personList.vue'
import calendar from "js-calendar-converter";
export default {
  components: {
    personList
  },
  data() {
    return {
      lists: [
        {
          id: 1,
          date: '2021-05-16 19:00:19',
          zdnr: "腰疼腿疼胳膊腿",
          zdlx: 1,
          hfr: '张三李四王五赵六'

        },
        {
          id: 2,
          date: '2021-05-16 19:00:19',
          zdnr: "腰疼腿疼胳膊腿",
          zdlx: 1,
          hfr: '张三李四王五赵六'

        },
        {
          id: 3,
          date: '2021-05-16 19:00:19',
          zdnr: "腰疼腿疼胳膊腿",
          zdlx: 1,
          hfr: '张三李四王五赵六'

        },
        {
          id: 4,
          date: '2021-05-16 19:00:19',
          zdnr: "腰疼腿疼胳膊腿",
          zdlx: 2,
          hfr: '张三李四王五赵六'

        },
        {
          id: 5,
          date: '2021-05-16 19:00:19',
          zdnr: "腰疼腿疼胳膊腿",
          zdlx: 2,
          hfr: '张三李四王五赵六'

        },
        {
          id: 6,
          date: '2021-05-16 19:00:19',
          zdnr: "腰疼腿疼胳膊腿",
          zdlx: 1,
          hfr: '张三李四王五赵六'

        },
        {
          id: 7,
          date: '2021-05-16 19:00:19',
          zdnr: "腰疼腿疼胳膊腿",
          zdlx: 1,
          hfr: '张三李四王五赵六'

        },
        {
          id: 8,
          date: '2021-05-16 19:00:19',
          zdnr: "腰疼腿疼胳膊腿",
          zdlx: 2,
          hfr: '张三李四王五赵六'

        }
      ]

      ,
      activeNames: [],
      openDataScope: false,
      title: '',
      loading: true,
      total: 0,
      // 角色表格数据
      roleList: [],
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      list: [
        {
          date: "2024-05-07",
          dhf: 12,
          yhf: 21
        },
        {
          date: "2024-05-01",
          dhf: 102,
          yhf: 210
        },
        {
          date: "2024-05-13",
          dhf: 1200,
          yhf: 2100
        },
        {
          date: "2024-05-20",
          dhf: 192,
          yhf: 21
        },
        {
          date: "2024-06-20",

          yhf: 21
        },
        {
          date: "2024-04-14",
          dhf: 1092,

        }
      ],
      value2: "",
      // 设置value，会自动显示value对应月份，可以设置为selectedDates的第一个日期
      value: "",
      // 根据selectedDates设置选中日期
      selectedDates: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      form: {},
      handleVistPup: false,
      handleVistData: {}
    };
  },
  mounted() {
    this.getDate();
    this.getList();


  },
  methods: {
    // 回访历史
    handleVist(row) {
      this.lists.map(res => {

        this.activeNames.push(res.id)

      })
      this.handleVistPup = true
      this.handleVistData = row
    },
    // 新增回访人/回访记录
    // 取消按钮（数据权限）
    cancelDataScope() {
      this.handleVistPup=false
      this.openDataScope = false;
      this.addTagePup = false
      this.reset();
    },
    submitDataScope: function () {
      if (this.title == "新增回访人") {
        let ids = this.$refs.addVisitPerson.ids
        // getIds
        console.log(ids, '我要拿到传入出去')
        this.$refs.addVisitPerson.getIds()
        this.openDataScope = false;
      } else if (this.title == '新增回访记录') {
        console.log(this.form, '我是新增回访记录内容')
        this.reset()
        this.openDataScope = false;
      }
      return;
      if (this.form.roleId != undefined) {
        this.form.deptIds = this.getDeptAllCheckedKeys();
        dataScope(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.openDataScope = false;
          this.getList();
        });
      }
    },
    reset() {
      this.form = {

        roleName: undefined,

      };
    },
    handleAdd(type) {
      if (type == 1) {
        this.title = "新增回访人";
      } else if (type == 2) {
        this.title = "新增回访记录"
      }
      this.openDataScope = true
      this.reset();
      // this.getMenuTreeselect();
      // this.open = true;

    },
    // 表单开始
    getList() {
      // 注释
      // 目前没有完整接口，只有假数据，如果调用完整的接口，则把return之后的数据放开即可
      this.loading = true;
      let res = {
        "code": 200,
        "message": "操作成功",
        "data": {
          "page": 1,
          "limit": 10,
          "totalPage": 12,
          "total": 116,
          "list": [
            {
              "id": 503,
              "orderId": "order14154171437441567413498",
              "createTime": "2024-04-29 15:06:55",
              "paid": true,
              "packageId": 24,
              "payPrice": "0.01",
              "uid": 14,
              "realName": "",
              "validTime": "2025-04-29 00:00:00",
              "status": 0,
              "refundStatus": 0,
              "statusDesc": "待发货",
              "name": "测试",
              "price": "0.01"
            },
            {
              "id": 502,
              "orderId": "order65250171394360900599331",
              "createTime": "2024-04-24 15:26:49",
              "paid": true,
              "packageId": 24,
              "payPrice": "0.01",
              "uid": 12,
              "realName": "测试用户_138",
              "validTime": "2025-04-24 00:00:00",
              "status": 0,
              "refundStatus": 0,
              "statusDesc": "待发货",
              "name": "测试",
              "price": "0.01"
            },
            {
              "id": 501,
              "orderId": "order70840171378063879077603",
              "createTime": "2024-04-22 18:10:38",
              "paid": true,
              "packageId": 24,
              "payPrice": "0.00",
              "uid": 0,
              "realName": "",
              "validTime": "2025-03-29 00:00:00",
              "status": 1,
              "refundStatus": 0,
              "statusDesc": "已收货",
              "name": "测试",
              "price": "0.01"
            },
            {
              "id": 500,
              "orderId": "order51578171377963729720880",
              "createTime": "2024-04-22 17:53:57",
              "paid": true,
              "packageId": 24,
              "payPrice": "0.00",
              "uid": 0,
              "realName": "",
              "validTime": "2025-03-29 00:00:00",
              "status": 1,
              "refundStatus": 0,
              "statusDesc": "已收货",
              "name": "测试",
              "price": "0.01"
            },
            {
              "id": 499,
              "orderId": "order83973171377962606941754",
              "createTime": "2024-04-22 17:53:46",
              "paid": true,
              "packageId": 24,
              "payPrice": "0.00",
              "uid": 0,
              "realName": "",
              "validTime": "2025-03-29 00:00:00",
              "status": 1,
              "refundStatus": 0,
              "statusDesc": "已收货",
              "name": "测试",
              "price": "0.01"
            },
            {
              "id": 498,
              "orderId": "order32621171351673231664324",
              "createTime": "2024-04-19 16:52:12",
              "paid": true,
              "packageId": 24,
              "payPrice": "0.00",
              "uid": 0,
              "realName": "",
              "validTime": "2025-04-19 00:00:00",
              "status": 1,
              "refundStatus": 0,
              "statusDesc": "已收货",
              "name": "测试",
              "price": "0.01"
            },
            {
              "id": 497,
              "orderId": "order32335171351671407114172",
              "createTime": "2024-04-19 16:51:54",
              "paid": true,
              "packageId": 24,
              "payPrice": "0.01",
              "uid": 12,
              "realName": "测试用户_138",
              "validTime": "2025-04-19 00:00:00",
              "status": 0,
              "refundStatus": 0,
              "statusDesc": "待发货",
              "name": "测试",
              "price": "0.01"
            },
            {
              "id": 496,
              "orderId": "order92479171343522871799748",
              "createTime": "2024-04-18 18:13:48",
              "paid": true,
              "packageId": 24,
              "payPrice": "0.00",
              "uid": 0,
              "realName": "",
              "validTime": "2025-04-18 00:00:00",
              "status": 1,
              "refundStatus": 0,
              "statusDesc": "已收货",
              "name": "测试",
              "price": "0.01"
            },
            {
              "id": 495,
              "orderId": "order12517171343520428974402",
              "createTime": "2024-04-18 18:13:24",
              "paid": true,
              "packageId": 24,
              "payPrice": "0.01",
              "uid": 12,
              "realName": "测试用户_138",
              "validTime": "2025-04-18 00:00:00",
              "status": 0,
              "refundStatus": 0,
              "statusDesc": "待发货",
              "name": "测试",
              "price": "0.01"
            },
            {
              "id": 494,
              "orderId": "order77797171340621983193513",
              "createTime": "2024-04-18 10:10:19",
              "paid": true,
              "packageId": 21,
              "payPrice": "0.00",
              "uid": 4,
              "realName": "222",
              "validTime": "2025-03-29 00:00:00",
              "status": 1,
              "refundStatus": 0,
              "statusDesc": "已收货",
              "name": "研学礼包",
              "price": "699.00"
            }
          ]
        }
      }
      this.roleList = res.data.list;
      this.total = res.data.total;
      this.loading = false;
      // console.log()
      return;
      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.roleList = response.rows;
        this.total = response.total;
        this.loading = false;
      }
      );
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 表单结束
    handleCellClick(date, data) {
      console.log(date);
      console.log(data, "datadata");
      //   console.log("Clicked on: ", date.getDate());
      // 你可以在这里编写你的逻辑
    },
    getDate() {
      let date = new Date();
      let theYear = date.getFullYear(); //获取完整的年份(4位)
      let theMonth = date.getMonth() + 1; //获取当前月份(1-12,1代表1月)
      theMonth = theMonth >= 10 ? theMonth : "0" + theMonth;
      let theDay = date.getDate(); //获取当前日(1-31)
      theDay = theDay >= 10 ? theDay : "0" + theDay;
      this.value = theYear + "-" + theMonth + "-" + theDay;
    },

    // 是否选中日期
    isSelected: function (slotDate, slotData) {
      return this.selectedDates.includes(slotData.day);
    },
    // 是否节假日
    isFestival(slotDate, slotData) {
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      );

      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(
        lunarDay.festival == null ? "" : " " + lunarDay.festival
      );
      festAndTerm.push(
        lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
      );
      festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
      festAndTerm = festAndTerm.join("");

      return festAndTerm != "";
    },
    // 公历转农历
    solarToLunar(slotDate, slotData) {
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      );

      // 农历日期
      let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;

      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(
        lunarDay.festival == null ? "" : " " + lunarDay.festival
      );
      festAndTerm.push(
        lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
      );
      festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
      festAndTerm = festAndTerm.join("");

      return festAndTerm == "" ? lunarMD : festAndTerm;
    }
  }
};
</script>
<style>
.hfName {
  font-size: 12px;

}

.wrap {
  padding: 30px;
}

.el-calendar__header {
  justify-content: space-around !important;
}

/**隐藏上一月、本月、下一月*/
.el-calendar__button-group {
  /* display: none; */
}

/**月份居中*/
.el-calendar__title {
  /* width: 100%; */
  text-align: center;
}

/**日期div的样式*/
.el-calendar-table tr td:first-child {
  border-left: 0px;
}

.el-calendar-table td {
  min-height: 110px;
  min-width: 110px;
  border-right: 0px;
}

.el-calendar-table td.is-selected {
  background-color: #1890ff !important;
}

.el-calendar-table td.is-selected .lunar {
  color: #fff !important;
}

.el-calendar-table td.is-selected .solar {
  color: #fff !important;
}

.el-calendar-table .el-calendar-day {
  height: 100%;
  padding: 0px;
  text-align: center;
}

.el-calendar-table .el-calendar-day>div {
  height: 80px;
  /* line-height: 80px; */
}

/**日期div的样式-公历*/
.el-calendar-table .el-calendar-day>div .solar {
  padding-top: 10px;
}

/**日期div的样式-农历*/
.el-calendar-table .el-calendar-day>div .lunar {
  padding-top: 10px;
}

/**日期div的样式-选中*/
.el-calendar-table .el-calendar-day>div.selected {
  background-color: #fef2f2;
  border: 3px solid #fb0;
  border-radius: 20px;
}

/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n + 2) .solar {
  color: red;
}

/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
  color: #606266;
}

/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
  color: red;
}

/**禁用点击效果*/
/*.el-calendar-table td {*/
/*pointer-events: none;*/
/*}*/
</style>
